<template>
	<view>
		<view class="download">
			<uni-popup ref="popup" type="center" :mask-click="false">
				<view class="upgrade">
					<view class="logo">
						<image src="./static/update.png" mode="widthFix" />
					</view>
					<view class="content">
						<view class="title">
							<text>{{upgrading ? "正在升级" : "发现新版本"}}</text>
						</view>
						<view class="container">
							<view class="descriptions">
								<text>{{upgrading ? "正在为您下载,请耐心等待" : "本次版本更新描述内容:"}}</text>
							</view>
							<view class="details" v-if="!upgrading">
								<view class="item">
									<text v-html="updateDesc"></text>
								</view>
							</view>
							<view v-else class="prpgroess">
								<progress :percent="downloadProgress" active-mode="forwards" activeColor="red" active
									stroke-width="4" show-info />
							</view>
						</view>
						<view v-if="!upgrading" class="btn-group">
							<view v-if="!force" class="cancel" @click="hiddenUppop">
								<text>取消</text>
							</view>
							<view class="confirm" @click="upgradeEvent">
								<text>更新</text>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["updateDesc", "downloadUrl", "force"],
		data: () => ({
			// 是否下载
			upgrading: false,
			// 下载时间
			downloadProgress: 0,
			// 下载任务
			downloadTask: null,
			platform: 'android',
			version: '1.0.0',
		}),
		methods: {
			// 检测更新
			upgrade() {
				this.platform = uni.getSystemInfoSync().platform
				this.version = plus.runtime.version
				this.$refs.popup.open()
			},
			// 取消更新
			hiddenUppop() {
				this.$refs.popup.close();
			},
			// 点击更新
			upgradeEvent() {
				if (!this.upgrading) {
					this.upgrading = true
					if (this.platform == 'android') {
						this.downloadApplications()
					}
					if (this.platform == 'ios') {
						plus.runtime.openURL(this.downloadUrl)
					}
				}
			},
			// 下载
			downloadApplications() {
				let that = this
				// 建立下载任务
				that.downloadTask = uni.downloadFile({
					// 下载地址
					url: that.downloadUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							// 把当前app保存下载
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (resp) => {
									let savedFilePath = resp.savedFilePath;
									let installPath = plus.io.convertLocalFileSystemURL(savedFilePath);
									// 安装
									that.installApplications({
										filePath: installPath,
										success: (res) => {},
										error: (err) => {
											that.hiddenUppop()
											uni.showToast({
												icon: 'none',
												title: '更新失败，请稍后再试~~~'
											})
										}
									})
								},
								fail: (err) => {
									that.hiddenUppop()
								}
							});
						} else {
							that.hiddenUppop()
							uni.showToast({
								icon: 'none',
								title: '更新失败，请稍后再试~~~'
							})
						}
					},
				});

				this.downloadTask.onProgressUpdate((res) => {
					// 下载进度
					this.downloadProgress = res.progress
				});
			},
			//安装
			installApplications({
				filePath,
				success,
				error
			}) {
				plus.runtime.install(
					filePath, {
						force: true
					},
					success,
					error
				);
			},
		}
	};
</script>

<style lang="scss">
	.download .upgrade {
		position: relative;
		background: #fff;
		width: 468rpx;
		min-height: 238rpx;
		border-radius: 20rpx;
	}

	.download .logo image {
		width: 208rpx;
		height: 208rpx;
		position: absolute;
		top: -80rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.download .content {
		padding-top: 80rpx;
	}

	.download .content .title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.download .content .container {
		color: #666;
	}

	.download .content .container .descriptions {
		padding: 0rpx 30rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.download .content .container .details,
	.download .content .prpgroess {
		padding: 16rpx 46rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.download .content .prpgroess {
		padding: 16rpx 22rpx;
		margin: 20rpx 0;
	}

	.download .content .btn-group {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.download .content .btn-group view {
		width: 200rpx;
		height: 68rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 14rpx;
		font-size: 24rpx;
		border-radius: 16rpx;
		line-height: 1.5;
	}

	.download .content .btn-group .confirm {
		background: #ef5656;
		color: #fff;
	}
</style>
